<!DOCTYPE html>
<html class="x-admin-sm">
    <head>
        <meta charset="UTF-8">
        <title>导入</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="stylesheet" href="../css/font.css">
        <link rel="stylesheet" href="../css/xadmin.css">
        <script type="text/javascript" src="../lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="../js/xadmin.js"></script>
        <script src="../lib/axios.min.js"></script>
        <script src="../lib/xlsx.mini.min.js"></script>
        <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
        <!--[if lt IE 9]>
            <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
            <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <div class="layui-upload">
            <button type="button" class="layui-btn layui-btn-normal" id="test8">选择文件</button><input class="layui-upload-file" type="file" accept="" name="file">
            <button type="button" class="layui-btn" id="test9">开始导入</button>
        </div>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space10">
                <div class="layui-col-xs6">
                    <br/>
                    <div id="view"></div>
                </div>
                <div class="layui-col-xs6">
                    <form class="layui-form">
                        <div class="layui-form-item">
                            <label class="layui-form-label">全宗名称</label>
                            <div class="layui-input-inline">
                                <div id="view1"></div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">档案类型</label>
                            <div class="layui-input-inline">
                                <div id="view2"></div>
                            </div>
                        </div>
                    </form>
                    <table id="demo3"></table>
                </div>
            </div>
        </div>
        <script type="text/html" id="demo1">
            <select name="qid" id="qid" lay-filter="qzType">
                {{#  layui.each(qz, function(index, item){ }}
                <option value="{{item.qid}}">{{item.title}}</option>
                {{#  }); }}
                {{#  if(qz.length === 0){ }}
                无数据
                {{#  } }}
            </select>
        
        </script>
        <script type="text/html" id="demo2">
            <select name="kid" id="kid" lay-filter="kindType">
                {{#  layui.each(kind, function(index, item){ }}
                <option value="{{item.kid}}">{{item.kname}}</option>
                {{#  }); }}
                {{#  if(kind.length === 0){ }}
                无数据
                {{#  } }}
            </select>
        
        </script>

        <script>
            var getData;
            var filen;
            var wb; //读取完成的数据
            var aa = [];
            var text = [];
            var rABS = false; //是否将文件读取为二进制字符串
            layui.use(['upload','transfer'], function(){
                var upload = layui.upload
                ,transfer = layui.transfer;
                
                upload.render({
                    elem: '#test8'
                    ,url: '/a' //改成您自己的上传接口
                    ,method: 'post'
                    ,auto: false
                    ,bindAction: '#test9'
                    ,accept: 'file'
                    ,choose: function(obj) {
                        var files = obj.pushFile();
                        //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
                        obj.preview(function(index, file){
                            if (!file) {
                                return;
                            }
                            const IMPORTFILE_MAXSIZE = 1 * 4096; //这里可以自定义控制导入文件大小
                            filen = file.name;
                            var suffix = file.name.split(".")[1]
                            if (suffix != 'xls' && suffix != 'xlsx') {
                                alert('导入的文件格式不正确!')
                                return
                            }
                            if (file.size / 1024 > IMPORTFILE_MAXSIZE) {
                                alert('导入的表格文件不能大于2M')
                                return
                            }
                            var f = file;
                            var reader = new FileReader();
                            reader.onload = function (e) {
                                var data = e.target.result;
                                if (rABS) {
                                    wb = XLSX.read(btoa(fixdata(data)), { //手动转化
                                        type: 'base64'
                                    });
                                } else {
                                    wb = XLSX.read(data, {
                                        type: 'binary'
                                    });
                                }
                                //wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
                                //wb.Sheets[Sheet名]获取第一个Sheet的数据
                                aa = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
                                //获取表格中为address的那列存入text中
                                text=[];
                                var i = 0;
                                for (var key in aa[0]) {
                                    i++;
                                    text.push({'value': i, 'title': key});
                                };

                                //渲染
                                transfer.render({
                                    elem: '#view'  //绑定元素
                                    ,data: text
                                    ,id: 'demo4' //定义索引
                                });
                            };
                            if (rABS) {
                                reader.readAsArrayBuffer(f);
                            } else {
                                reader.readAsBinaryString(f);
                            }
                        })
                    }
                    ,done: function(){
                        getData = transfer.getData('demo4');
                        var order = [];
                        var i = 0;
                        getData.forEach(v => {
                            order.push({"th": v.value});
                        }); 
                        let b={
                            filename: filen,
                            field: order,
                            kid: kin.kid
                        };
                        axios.post('/rush', b).then(res=>{
                            layer.msg("成功导入"+res.data+"条数据");
                        })
                    }
                });
            });

            var qz = [];
            var kin = [];
            var kind = [];
            axios.get('/api/get_q').then(res=>{
                for (var i in res.data){
                    if (res.data[i].th >= 0){
                        qz.push(res.data[i]);
                    }
                };
                
                layui.use(['laytpl','form', 'table'], function(){
                    var laytpl = layui.laytpl
                    ,form = layui.form
                    ,table = layui.table;
                    var getTplq = demo1.innerHTML
                    ,view1 = document.getElementById('view1');
                    laytpl(getTplq).render(demo1, function(html){
                        view1.innerHTML = html;
                    });
                    var a = {qid: qz[0].qid}
                    axios.post('/api/get_k_q', a).then(res=>{
                        kind = res.data;
                        kin = kind[0];
                        var getTplk = demo2.innerHTML
                        ,view = document.getElementById('view2');
                        laytpl(getTplk).render(kind, function(html){
                            view2.innerHTML = html;
                        });
                        form.render('select');
                        table.render({
                            elem: '#demo3'
                            ,width: 200
                            ,cols: [[
                                {field: 'field', title: '字段码'}
                                ,{field: 'title', title: '字段名'}          
                            ]]
                            ,data: kin.head
                        });
                    });

                    form.on("select(qzType)", function(data){
                        console.log(data)
                        var qval = Number(data.value);
                        var a = {
                            qid: qval
                        }
                    
                        axios.post('/api/get_k_q', a).then(res=>{
                            kind = res.data;
                            kin = kind[0];
                    
                            var table = layui.table;
                            var getTplk = demo2.innerHTML
                            ,view2 = document.getElementById('view2');
                            laytpl(getTplk).render(kind, function(html){
                                view2.innerHTML = html;
                            });
                            form.render('select');
                            table.render({
                                elem: '#demo3'
                                ,width: 200
                                ,cols: [[
                                    {field: 'field', title: '字段码'}
                                    ,{field: 'title', title: '字段名'}        
                                ]]
                                ,data: kin.head
                            }); 
            
                        });
                    })
                    form.on('select(kindType)', function(da){   
                        var val = Number(da.value);
                        var ki = kind.filter(item=>{
                            return item.kid == val;
                        });
                        kin = ki[0];
                        table.reload('demo3', {
                            data: kin.head
                        })
                    });
                })
            })

            
        </script>
    </body>

</html>